<template>
    <div>
        <!--第二种方式-->
        <!-- <input type="text" v-model="mytext" @input="onChange"> -->
        <input type="text" v-model="mytext">
        <ul>
            <!--第二种方式-->
            <!-- <li v-for="item  in arr" :key="item">
                第一种方式
                <div v-show="item.includes(mytext)"> {{ item }}</div>  
                {{ item }}
            </li> -->
            <!--第三方式-->
            <li v-for="item in onChange()" :key="item">
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const mytext = ref('')
const arr = ref(['aaa', 'abc', 'aac', 'bba', 'bcd', 'bdd', 'cla', 'ccc', 'ccd'])
//const arrt = ref(['aaa', 'abc', 'aac', 'bba', 'bcd', 'bdd', 'cla', 'ccc', 'ccd'])

const onChange = () => { 
    return  arr.value.filter(item => item.includes(mytext.value))
}

</script>

<style scoped>

</style>